<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Panel CSS</title>
<!--
   <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" /> 
 -->

<link rel="stylesheet" href="./css/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" /> 
<link rel="stylesheet" type="text/css" href="./css/jquery.tabs.css" /> 
<link rel="stylesheet" href="./css/layout2columns.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/panelCSS.css" type="text/css" media="screen" />

<script type="text/javascript" src="./js/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/ui/ui.core.js"></script>
<script type="text/javascript" src="./js/ui/ui.spinner.js"></script>
<script type="text/javascript" src="./js/ui/ui.tabs.js"></script>
<script type="text/javascript" src="./js/panelCSS.js"></script>

<script src="./js/colorpicker/js/colorpicker.js" type="text/javascript"></script> 
<script src="./js/colorpicker/js/eye.js" type="text/javascript"></script> 
<script src="./js/colorpicker/js/utils.js" type="text/javascript"></script> 
<script src="./js/colorpicker/js/layout.js?ver=1.0.2" type="text/javascript"></script>
</head>
<body>
<div id="container">
	<div id="header">
		<a href="http://jquery.com" title="Powered By jQuery"></a>
		<h1>Panel CSS</h1>
	</div>
	<div id="sidebar">
		<div id="cssform" class="ui-tabs-nav">
			<ul>
				<li><a href="#size"><span>dimensiones</span></a></li>
				<li><a href="#font"><span>fuentes</span></a></li>
				<li><a href="#text"><span>texto</span></a></li>
				<li><a href="#background"><span>fondo</span></a></li>
				<li><a href="#list"><span>listas</span></a></li>
				<!--<li><a href="#background"><span>enlaces</span></a></li>-->
				<!--<li><a href="#background"><span>tablas</span></a></li>-->
			</ul>
			<div id="font" class="ui-tabs-panel">
			  <fieldset>
			  <legend>font:</legend>
  				<p>
  					<label for="font-family">font-family:</label>
  					<select id="font-family">
  						<option value="Verdana" style="font-family: Verdana">Verdana</option>
  						<option value="Georgia" style="font-family: Georgia">Georgia</option>
  						<option value="Times New Roman" style="font-family: 'Times New Roman'">Times New Roman</option>
  						<option value="Times" style="font-family: Times">Times</option>
  						<option value="Arial" style="font-family: Arial">Arial</option>
  						<option value="Helvetica" style="font-family: Helvetica">Helvetica</option>
  						<option value="Tahoma" style="font-family: Tahoma">Tahoma</option>
  						<option value="Comic Sans MS" style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
  						<option value="Trebuchet" style="font-family: Trebuchet">Trebuchet</option>
  						<option value="Courier" style="font-family: Courier">Courier</option>
  					</select>
  				</p>
  				<p>
  					<label for="font-size">font-size:</label>
  					<input id="font-size" name="font-size" type="text" class="spinner" value="16" />
  				</p>
  				<p>	
  					<label for="font-style">font-style:</label>
  					<select id="font-style">
  						<option value="normal">normal</option>
  						<option value="italic">italic</option>
  						<option value="oblique">oblique</option>
  					</select>
  				</p>
  				<p>
  					<label for="font-variant">font-variant:</label>
					<input id="small-caps" type="checkbox" name="small-caps" value="small-caps"/>
					<label for="small-caps">small-caps</label>
  				</p>
  			</fieldset>
  			<fieldset>
  			  <legend>font-weight:</legend>
  			  <p>
				    <input type="radio" name="weight" value="normal" id="w1" checked="checked"/>
				    <label for="w1">normal</label>
				    <input type="radio" name="weight" value="lighter" id="w0"/>
				    <label for="w0">lighter</label>
				    <input type="radio" name="weight" value="bold" id="w2"/>
				    <label for="w2">bold</label>
				    <input type="radio" name="weight" value="bolder" id="w3"/>
				    <label for="w3">bolder</label>
				  </p>
				  <p>
				    <input type="radio" name="weight" value="custom" id="w4"/>
				    <label for="w4">num:</label>
				    <input id="weightnum" name="weightnum" type="text" class="spinner" value="100" />
				  </p>
  			</fieldset>
			</div>
			<div id="text" class="ui-tabs-panel ui-tabs-hide">
				<fieldset>
					<legend>line-height</legend>
					<label for="line-height">line-height:</label>
					<input id="line-height" name="line-height" type="text" class="spinner" value="100" />
				</fieldset>
				<fieldset>
					<legend>text-indent</legend>
					<label for="text-indent">text-indent:</label>
					<input id="text-indent" name="text-indent" type="text" class="spinner" value="0" />
				</fieldset>
				<fieldset>
				  <legend>text-decoration:</legend>
					<input id="underline" type="checkbox" name="underline" value="underline"/>
					<label for="underline">underline</label>
          <input id="overline" type="checkbox" name="overline" value="overline"/>
          <label for="overline">overline</label>
          <input id="line-through" type="checkbox" name="line-through" value="line-through"/>
          <label for="line-through">line-through</label>
          <input id="blink" type="checkbox" name="blink" value="blink"/>
          <label for="blink">blink</label> 
				</fieldset>
				<fieldset>
					<legend>text-transform:</legend>
					<p>
				    <input type="radio" name="transform" value="none" id="t1" checked="checked"/>
				    <label for="t1">none</label>
				    <input type="radio" name="transform" value="uppercase" id="t0"/>
				    <label for="t0">uppercase</label>
				    <input type="radio" name="transform" value="lowercase" id="t2"/>
				    <label for="t2">lowercase</label>
				    <input type="radio" name="transform" value="capitalize" id="t3"/>
				    <label for="t3">capitalize</label>
				  </p>
				</fieldset>
				<fieldset>
					<legend>text-align:</legend>
					<p>
				    <input type="radio" name="text-align" value="left" id="al1" checked="checked"/>
				    <label for="al1">left</label>
				    <input type="radio" name="text-align" value="center" id="al0"/>
				    <label for="al0">center</label>
				    <input type="radio" name="text-align" value="right" id="al2"/>
				    <label for="al2">right</label>
				    <input type="radio" name="text-align" value="justify" id="al3"/>
				    <label for="al3">justify</label>
				  </p>
				</fieldset>
				<fieldset>
					<legend>spacing:</legend>
					<label for="word-spacing">word-spacing:</label>
					<input id="word-spacing" name="word-spacing" type="text" class="spinner" value="0" />
					<label for="letter-spacing">letter-spacing:</label>
					<input id="letter-spacing" name="letter-spacing" type="text" class="spinner" value="0" />
				</fieldset>
			</div>
			<div id="size" class="ui-tabs-panel ui-tabs-hide">
				<div id="box">
					<fieldset>
						<legend>width</legend>
						<input type="radio" name="width" value="auto" id="w0" checked="checked"/>
						<label for="w0">auto</label>
						<input type="radio" name="width" value="custom" id="w1"/>
						<label for="w1">px:</label>
						<input id="widthnum" name="widthnum" type="text" class="spinner" value="500" />
					</fieldset>
					<fieldset>
						<legend>padding</legend>
						<input id="padding" name="padding" type="text" class="spinner" value="0" />
					</fieldset>
					<fieldset>
						<legend>margin</legend>
						<input id="margin" name="margin" type="text" class="spinner" value="30" />
					</fieldset>
				</div>
				<fieldset>
				  <legend>border</legend>
				  <p><label for="border-style">border-style:</label>
				  <select id="border-style">
					 <option value="none">none</option>
					 <option value="dashed">dashed</option>
					 <option value="dotted">dotted</option>
					 <option value="solid">solid</option>
					 <option value="ridge">ridge</option>
					 <option value="double">double</option>
					 <option value="groove">groove</option>
					 <option value="inset">inset</option>
					 <option value="outset">outset</option>
				  </select>
				  </p>
				  <p>
				  <label for="border">border-width:</label>
				  <input id="border" name="border" type="text" class="spinner" value="2" />
				  </p>
				  </fieldset>
			</div>
			<div id="list" class="ui-tabs-panel ui-tabs-hide">
				<label for="list-style-type">list-style-type:</label>
				<select id="list-style-type">
					<option value="disc">disc</option>
					<option value="none">none</option>
					<option value="circle">circle</option>
					<option value="square">square</option>
					<option value="decimal">decimal</option>
					<option value="decimal-leading-zero">decimal-leading-zero</option>
					<option value="lower-roman">lower-roman</option>
					<option value="upper-roman">upper-roman</option>
					<option value="lower-alpha">lower-alpha</option>
					<option value="upper-alpha">upper-alpha</option>
					<option value="lower-greek">lower-greek</option>
					<option value="upper-greek">upper-greek</option>
					<option value="lower-latin">lower-latin</option>
					<option value="upper-latin">upper-latin</option>
					<option value="hebrew">hebrew</option>
					<option value="armenian">armenian</option>
					<option value="georgian">georgian</option>
					<option value="cjk-ideographic">cjk-ideographic</option>
					<option value="hiragana">hiragana</option>
					<option value="katakana">katakana</option>
					<option value="hiragana-iroha">hiragana-iroha</option>
					<option value="katakana-iroha">katakana-iroha</option>
				</select>
				<fieldset>
					<legend>list-style-position:</legend>
		    	<input type="radio" name="list-style-position" value="inside" id="li0" checked="checked"/>
		    	<label for="li0">inside</label>
			   	<input type="radio" name="list-style-position" value="outside" id="li1"/>
			   	<label for="li1">outside</label>
				</fieldset>
			</div>
			<div id="background" class="ui-tabs-panel ui-tabs-hide">
			<script language="javascript"> 
				$('#background-color').ColorPicker({
					onSubmit: function(hsb, hex, rgb) {	    
	    			var color = '#' + hex;
						$('#background-color').val(color);		
	    			$('#background-color').css("background-color", color);
						$('#content').css("background-color",  color);
					}
				});
			</script>
				<label for="background-color">background-color:</label>
				<input type="text" maxlength="6" size="6" id="background-color" name="background-color"  value="#ffffff" />
			</div>
		</div>
	</div>
	<div id="main">
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut purus ut purus suscipit rhoncus. Pellentesque orci mi, condimentum ut, congue ac, faucibus at, quam. In hac habitasse platea dictumst. Nam sapien nunc, eleifend sit amet, interdum faucibus, pretium eget, felis? Morbi at felis id sem suscipit gravida! Nulla facilisi. Vestibulum velit. Sed ut elit! Proin ut dolor. Nam dignissim malesuada felis. Quisque tristique, augue vitae porta suscipit, purus mauris mollis pede, non laoreet lacus sem eu felis. Maecenas vestibulum odio a odio. Sed turpis. Aliquam feugiat libero at nulla. Aenean tristique sodales lectus. Ut accumsan convallis nunc.</p>
				<ul id="contentlist">
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				</ul>
			</div>
		</div>
	<div id="footer">
		<div id="licence"
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons License"</a>
		<p>© Adrián Pérez Orozco, Pablo Moncada Isla y Carlos A. Iglesias 2008, Universidad Politécnica de Madrid.</p>
		<p>Licenciado según <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>.</p>

		</div>
</div>
</body>
</html>
